Add cmd+k search dialog for episode discovery #36
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Add SearchDialog component with keyboard shortcuts (cmd+k, ctrl+k) - Add SearchButton component for visual trigger - Add /api/episodes/search.json endpoint for searchable data - Add search state signal in state.ts - Integrate search into Layout.astro - Include unit tests for new components Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com>
- Use JSX.TargetedMouseEvent<HTMLDivElement> for type safety - Pluralize results count correctly (1 result vs N results) Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Add search dialog with Cmd+K for episode content
Add cmd+k search dialog for episode discovery
Feb 4, 2026
Collaborator
|
damn Key Features:
|
argyleink
approved these changes
Feb 4, 2026
src/components/SearchDialog.tsx
Outdated
Comment on lines
5
to
12
| interface SearchableEpisode { | ||
| id: string; | ||
| title: string; | ||
| description: string; | ||
| episodeNumber: string; | ||
| episodeSlug: string; | ||
| episodeThumbnail?: string; | ||
| } |
Member
There was a problem hiding this comment.
@copilot this seems like a redundant interface, couldn't we just import the Episode type?
Contributor
Author
There was a problem hiding this comment.
Good call. Replaced with type SearchableEpisode = Pick<Episode, 'id' | 'title' | 'description' | 'episodeNumber' | 'episodeSlug' | 'episodeThumbnail'> in 8e5ad5a.
Replaced the redundant SearchableEpisode interface with a type alias that uses Pick<Episode, ...> to reuse the existing Episode type. Co-authored-by: RobbieTheWagner <2640861+RobbieTheWagner@users.noreply.github.com>
src/components/SearchDialog.tsx
Outdated
| <div class="bg-light-card dark:bg-dark-card w-full max-w-xl mx-4 rounded-lg shadow-2xl border border-light-input-border dark:border-dark-border overflow-hidden"> | ||
| {/* Search Input */} | ||
| <div class="flex items-center border-b border-light-input-border dark:border-dark-border px-4"> | ||
| <svg |
Member
There was a problem hiding this comment.
@copilot all these inline svgs should instead be moved to files in public/images like all our other svg icons
Contributor
Author
There was a problem hiding this comment.
Moved to public/images/search-icon.svg with CSS mask-image pattern matching the other icons in 0a0ab47.
- Added public/images/search-icon.svg - Created src/styles/search-icon.css with mask-image styling - Updated SearchDialog.tsx and SearchButton.tsx to use CSS class - Updated tests to match new icon implementation Co-authored-by: RobbieTheWagner <2640861+RobbieTheWagner@users.noreply.github.com>
Collaborator
|
@copilot critically review this PR for quality, performance, simplify, re-use of existing code, and other common best practices and checks |
- Move SearchableEpisode type to rss.ts for reuse across components - Fix potential runtime error with optional episodeNumber field - Import shared type in SearchDialog.tsx and search.json.ts Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com>
Contributor
Author
Critical review completed. Found and fixed the following issues in 8ca03f8: Fixed:
Already good:
|
src/lib/rss.ts
Outdated
| } | ||
|
|
||
| // Subset of Episode for search functionality | ||
| export type SearchableEpisode = Pick< |
Remove the SearchableEpisode type alias and use the Episode type directly as requested in code review. Co-authored-by: RobbieTheWagner <2640861+RobbieTheWagner@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
/api/episodes/search.jsonto provide all episode data for client-side searchSearchDialog.tsxwith Preact for interactivitystate.tswith search-related signalsLayout.astroImplementation Summary
This PR adds a cmd+k style search dialog for episode discovery with:
Components:
SearchDialog.tsx- Modal dialog with keyboard shortcuts, real-time filtering, arrow key navigationSearchButton.tsx- Visual trigger button with search icon and keyboard hintAPI:
/api/episodes/search.json- Provides searchable episode dataFeatures:
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.